<template>
  <view>
    <u-button
      plain
      shape="circle"
      size="mini"
      @click="getSmsCode"
      :disabled="disabled"
      :custom-style="{
        color: '#0049AC'
      }"
    >
      {{ tips }}
    </u-button>
    <u-verification-code
      keep-running
      :unique-key="uniqueKey"
      ref="uCode"
      @change="codeChange"
      :start-text="$t('locales.getCaptcha')"
      change-text="XS"
      :end-text="$t('locales.Recapture')"
    ></u-verification-code>
  </view>
</template>

<script>
import { doVisGetOTP } from '@/api/http/wallet'
export default {
  props: {
    phone: {
      type: String | Number,
      default: ''
    },
    uniqueKey: {
      type: String,
      default: ''
    },
    request: {
      type: Object,
      default: () => {}
    },
    disabled: {
      type: Boolean,
      default: false
    },
    success: {
      type: Function,
      default: () => {}
    }
  },
  data() {
    return {
      tips: this.$t('locales.getCaptcha')
    }
  },
  methods: {
    // 短信验证码倒计时事件
    codeChange(text) {
      this.tips = text
    },
    getSmsCode() {
      if (this.$refs.uCode.canGetCode) {
        doVisGetOTP({
          mobile: this.phone,
          ...this.request
        }).then(() => {
          this.$refs.uCode.start()
          this.$emit('success', true)
        })
      } else {
        uni.showToast({
          icon: 'none',
          title: this.$t('locales.sendAfterCountdown')
        })
      }
    }
  }
}
</script>

<style lang="scss"></style>
